<template>
  <div class="m-exam container">
    <el-breadcrumb class="nav-little" separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">
        <svg class="icon shouye" aria-hidden="true">
          <use xlink:href="#icon-shouye1"></use>
        </svg>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/main/exam' }">
        测评
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{activeName}}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="tabs my-tabs sys-tab">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane v-if="config.model_activity_list" label="活动管理" name="活动管理">
        </el-tab-pane>
        <el-tab-pane v-if="config.model_word_list" label="模版管理" name="模版管理">
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <div class="system-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'exam',
  components: {
  },
  data() {
    return {
      activeName: '活动管理',
    }
  },
  created() {
    this.init()
  },
  beforeUpdate() {
    this.init()
    if (this.$route.path === '/main/exam') {
      this.redirectUrl()
    }
  },
  computed: {
    ...mapGetters(['config'])
  },
  mounted() {
    if (this.$route.path === '/main/exam') {
      this.redirectUrl()
    }
  },
  methods: {
    //首次进入跳转
    redirectUrl() {
      let sysIndex = '/main/exam/active'
      this.$router.push(sysIndex)
    },
    init() {
      if (this.$route.path.indexOf('/active') > 0) {
        this.activeName = '活动管理'
      }else if(this.$route.path.indexOf('/module') > 0){
        this.activeName = '模版管理'
      }else{
        this.activeName = '活动管理'
      }
    },
    handleClick(tab) {
      if (this.activeName === '活动管理') {
        this.$router.push('/main/exam/active')
      }else if(this.activeName === '模版管理'){
        this.$router.push('/main/exam/module')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.m-exam {
  .nav-little {
    border-bottom: none;
    margin: 0;
    .shouye {
      font-size: 14px;
      color: #999;
    }
  }
  .system-content {
    // min-height: 1000px;
  }
}
</style>
<style lang="less">
.m-exam {
  padding: 0 30px;
  background-color: #fff;
  .tabs {
    .el-tabs__header {
      border-bottom: 4px solid #00b1d1;
      margin: 0;
      background: white;
      padding-left: 0;
      padding-top: 0;
    }
    .el-tabs__item {
      height: 38px;
      width: 130px;
      text-align: center;
      line-height: 36px;
      margin-right: 1px;
      background: #fff;
      color: #333;
      font-size: 14px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-weight: bold;
      border: 1px solid #00b1d1;
      border-bottom: 4px solid #00b1d1;
    }
    .el-tabs__nav-wrap {
      margin-bottom: -4px;
    }
    .el-tabs__content {
      /*background: white;*/
      /*min-height: 1000px;*/
      display: none;
    }
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      background: #00b1d1;
      color: #fff;
      border: 1px solid #00b1d1;
      border-bottom: 4px solid #00b1d1;
    }
  }
}
</style>
<style lang="less">
.sys-tab {
  .tabs .el-tabs__header {
    background: white;
  }
  .el-tabs__header {
    box-shadow: none;
  }
}
</style>



